<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="js/base.js"></script>
    <script src="js/md5.js"></script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <h3>
                用户登陆
            </h3>
            <div class="row clearfix">
                <div class="col-md-8 column">
                    <img alt="140x140" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F90%2F84%2F59824e3ad6c92_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652149375&t=fe2350a6fbff44ab1d5d696d9a141c11" /><br>
                </div>
                <div class="col-md-6 column">

                    <div class="form-group">
                        <label for="username">用户名</label><input type="text" class="form-control" id="username" />
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label><input type="password" class="form-control" id="password" />
                    </div>

                    <button type="submit" onclick="return onSignInClick();" class="btn btn-default">登陆</button><br>

                </div>
                <div class="col-md-6 column">
                    <button class="btn btn-default" onclick="return onTestClick();">测试登陆效果</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function onTestClick(){
        //希望带着token请求服务器
        $.rest("post","http://localhost:9001/qf/user/test",null,function(r){
            alert(r.result);
        });
        return false;
    }




    function onSignInClick(){
        let username=document.getElementById("username").value;
        let password=document.getElementById("password").value;
        //拼装一个json
        let jsonData={};
        jsonData.signInName=username;
        jsonData.password=md5(password).toUpperCase();
        $.rest("post","http://localhost:9001/qf/user/signIn",jsonData,function(r){
            if(r.ok){
                /**
                 * {
                       "code": 200,
                       "msg": "登陆成功",
                       "result": {
                           "user": {
                               "id": 1,
                               "username": "zhangsan",
                               "nickname": "张三",
                               "gender": "男",
                                "telephone": "15911135712",
                                "email": "zhangsan@qq.com",
                                "iconLink": ""
                            },
                            "token": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiLlvKDkuIkiLCJpYXQiOjE2NDg3Nzc2ODcsImV4cCI6MTY0ODc3OTQ4NywidXNlciI6IntcImVtYWlsXCI6XCJ6aGFuZ3NhbkBxcS5jb21cIixcImdlbmRlclwiOlwi55S3XCIsXCJpY29uTGlua1wiOlwiXCIsXCJpZFwiOjEsXCJuaWNrbmFtZVwiOlwi5byg5LiJXCIsXCJ0ZWxlcGhvbmVcIjpcIjE1OTExMTM1NzEyXCIsXCJ1c2VybmFtZVwiOlwiemhhbmdzYW5cIn0ifQ.eCtoJ6RFRIUKOBWjibw6KP7Zl5p1WdFBkvw84S9CS68"
                        },
                       "ok": true
                    }
                 */
                let token=r.result.token;
                let id=r.result.user.id;
                let username=r.result.user.username;
                let nickname=r.result.user.nickname;
                let gender=r.result.user.gender;
                let telephone=r.result.user.telephone;
                let email=r.result.user.email;
                let iconLink=r.result.user.iconLink;

                //前端开始保存数据，
                //各种类型的前端都有自己保存数据的技术，后端不需要操心。
                //Android或者iOS 把数据存在SQLite，这是一个前端的数据库。
                //H5把数据存在localStorage或者sessionStorage里。
                localStorage.setItem("token",token);
                localStorage.setItem("id",id);
                localStorage.setItem("username",username);
                localStorage.setItem("nickname",nickname);
                localStorage.setItem("gender",gender);
                localStorage.setItem("telephone",telephone);
                localStorage.setItem("email",email);
                localStorage.setItem("iconLink",iconLink);
                alert("登陆成功");
            }else{
                alert("登陆失败了");
            }
        });

        return false;
    }
</script>
</body>
</html>